import React from 'react';
import * as PropTypes from 'prop-types';
import moment from 'moment';

import { connect } from 'dva';

import Tools from 'utils/tools'
import Chart from 'components/Chart'
import CustomSelect from 'components/CustomSelect'
import SelectTime from 'components/TabEcharts/SelectTime'

import { Modal } from 'antd';

const now = new Date();
const startTime = new Date(+now - 86400000 * 6)
const endTime = new Date(now)
const dateRange = [startTime, endTime];
const format = 'YYYY-MM-DD';
const timeUnit = '日'

@connect(({ quality }) => ({ ...quality }))
class StatisticsWater extends React.Component {
  static defaultProps = {
    chartConf: {
      type: 'Common', 
      dataSource: 'WaterQualityIndicatorsResource',
      color: ["68, 130, 255", "251, 212, 55"],
      other: { showLegend: true },
    },
  }

  constructor(props) {
    super(props);

    let value;
    if ('defaultValue' in props) {
      value = 'TURBIDITY' || props.defaultValue;
    }
    let abstractOption = {};
    if ('defaultValue' in props) {
        abstractOption = props.defaultOption;
    }

    this.state = {
      value,
      modalVis: false, // 时间弹窗
      abstractOption,
      dateRange,
      startTime: moment(startTime).format(format),
      endTime: moment(endTime).format(format),
    };

    // 仅配合ec插件使用
    this.ec_dateRange = dateRange;
  }

  componentDidMount() {
    this.init();
  }

  init = async () => {
    const { startTime, endTime, value } = this.state;

    await this.props.dispatch({
      type: 'quality/queryWaterQualityIndicators',
      payload: {
        starttime: startTime,
        endtime: endTime,
        field: value,
      }
    })
  }

  formatAbstractOption = (abstractOption) => {
    const chartColumns = {
      seriesItems: [
        { name: abstractOption['label'], field: 'value', type: 'bar' },
        { name: '国际标准', field: 'standval', type: 'line' },
      ],
      xAxis: { field: 'time', format: 'M/D' },
      yAxis: [{ name: abstractOption['unit'] }],
    }
    return chartColumns;
  }

  // 下拉选择 change
  handleChange =(value) =>{
    const { abstractList } = this.props;
    const { value: lastValue } = this.state;

    if (value  !== lastValue ) {
      const abstractOption = Tools.columnsList(abstractList, value);
      this.setState({
        value,
        abstractOption,
      }, async () => {
        await this.init()
      })
    }
  }

  // 选择时间
  handleCalendarChange = (dateRange) => {
    const startTime = moment(dateRange[0]).format(format)
    const endTime = moment(dateRange[1]).format(format)
    this.setState({
      dateRange,
      startTime,
      endTime,
    }, async () => {
      await this.init()
    })
  }

  // 
  timeChange = obj => {
    const { startTime, endTime } = obj;
    this.ec_dateRange = [startTime, endTime];
  };
  onModalCancel = () =>{
    this.setState({
      modalVis: false
    }, ()=>{
      this.handleCalendarChange(this.ec_dateRange)
    })
  };
  cardChange = () => {
    this.setState({ modalVis: true })
  }

  render() {
    const { dateRange, value, abstractOption } = this.state;
    const { abstractList, chartConf } = this.props;
    const { type: chartType, dataSource, color, other } = chartConf

    const startTime = moment(dateRange[0])
    const endTime = moment(dateRange[1])
    const chartColumns = this.formatAbstractOption(abstractOption)
    
    return (<>
      <CustomSelect
            columns={abstractList}
            defaultValue={value}
            onChange={this.handleChange}
        />
        <br/><br/>
    <div onClick={this.cardChange.bind(this)}>点击</div>
    <Modal
        title="选择日期"
        visible={this.state.modalVis}
        onCancel={this.onModalCancel}
        footer={null}
        width={600}
      >
        <SelectTime
        selectOptions={['日']}
          onChange={this.timeChange}
          defaultValue={
                { timeUnit, startTime, endTime }
            }
        />
      </Modal>

        <Chart
            type={chartType}
            color={color}
            columns={chartColumns}
            dataSource={this.props[dataSource]}
            other = {other}
          />
    </>)
  }
}

StatisticsWater.propTypes = {
  abstractList: PropTypes.array,
  onChange: PropTypes.func,
}
export default StatisticsWater;
